<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文章列表 - 知享社交</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        /* 基础样式 */
        body {
            font-family: 'Inter', system-ui, sans-serif;
            background-color: #f9fafb;
            color: #111827;
            line-height: 1.6;
        }
        
        /* 导航栏 */
        .navbar {
            background-color: white;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        }
        
        .logo {
            font-weight: 700;
            font-size: 1.5rem;
            color: #3b82f6;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .nav-link {
            color: #4b5563;
            font-weight: 500;
            transition: color 0.2s;
        }
        
        .nav-link:hover, .nav-link.active {
            color: #3b82f6;
        }
        
        /* 主体内容 */
        .main-container {
            padding: 2rem 0;
        }
        
        .page-title {
            font-size: 2rem;
            font-weight: 700;
            margin-bottom: 1.5rem;
            color: #111827;
        }
        
        /* 筛选区域 */
        .filters-container {
            background-color: white;
            border-radius: 12px;
            padding: 1.5rem;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
            margin-bottom: 2rem;
        }
        
        .filter-section {
            margin-bottom: 1.5rem;
        }
        
        .filter-title {
            font-weight: 600;
            margin-bottom: 0.75rem;
            color: #111827;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .filter-title i {
            color: #3b82f6;
        }
        
        /* 搜索框 */
        .search-container {
            position: relative;
            margin-bottom: 1.5rem;
        }
        
        .search-input {
            width: 100%;
            padding: 0.75rem 1rem 0.75rem 2.5rem;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            font-size: 1rem;
            transition: border-color 0.2s, box-shadow 0.2s;
        }
        
        .search-input:focus {
            outline: none;
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }
        
        .search-icon {
            position: absolute;
            left: 0.75rem;
            top: 50%;
            transform: translateY(-50%);
            color: #9ca3af;
        }
        
        /* 标签筛选 */
        .tag-filters {
            display: flex;
            flex-wrap: wrap;
            gap: 0.75rem;
        }
        
        .tag-filter {
            padding: 6px 14px;
            border-radius: 20px;
            font-size: 0.9rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
            border: 1px solid #e5e7eb;
            background-color: white;
            color: #4b5563;
        }
        
        .tag-filter:hover {
            background-color: #f3f4f6;
        }
        
        .tag-filter.active {
            background-color: #eff6ff;
            color: #2563eb;
            border-color: #dbeafe;
        }
        
        /* 下拉筛选 */
        .select-filter {
            width: 100%;
            padding: 0.75rem;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            font-size: 0.95rem;
            background-color: white;
            color: #111827;
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234b5563' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 0.75rem center;
        }
        
        .select-filter:focus {
            outline: none;
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }
        
        /* 排序选项 */
        .sort-options {
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
        }
        
        .sort-option {
            display: flex;
            align-items: center;
            gap: 6px;
            cursor: pointer;
            padding: 6px 12px;
            border-radius: 6px;
            transition: background-color 0.2s;
        }
        
        .sort-option:hover {
            background-color: #f3f4f6;
        }
        
        .sort-option.active {
            background-color: #eff6ff;
            color: #2563eb;
        }
        
        .sort-option input {
            display: none;
        }
        
        /* 文章列表 */
        .articles-container {
            margin-top: 1rem;
        }
        
        .article-card {
            background-color: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
            transition: transform 0.2s, box-shadow 0.2s;
            margin-bottom: 1.5rem;
            display: flex;
        }
        
        .article-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 15px rgba(0,0,0,0.07);
        }
        
        .article-image-container {
            flex: 0 0 220px;
        }
        
        .article-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .article-content {
            flex: 1;
            padding: 1.25rem;
            display: flex;
            flex-direction: column;
        }
        
        .category-tag {
            display: inline-block;
            padding: 3px 10px;
            border-radius: 20px;
            font-size: 0.75rem;
            font-weight: 500;
            margin-right: 0.5rem;
            margin-bottom: 0.75rem;
        }
        
        .cat-tech { background-color: #eff6ff; color: #2563eb; }
        .cat-life { background-color: #f0fdf4; color: #16a34a; }
        .cat-travel { background-color: #fef3c7; color: #d97706; }
        .cat-food { background-color: #fee2e2; color: #dc2626; }
        .cat-reading { background-color: #e0e7ff; color: #6366f1; }
        .cat-photo { background-color: #fce7f3; color: #c026d3; }
        
        .article-title {
            font-size: 1.25rem;
            font-weight: 600;
            margin-bottom: 0.75rem;
            color: #111827;
            transition: color 0.2s;
        }
        
        .article-title:hover {
            color: #3b82f6;
        }
        
        .article-excerpt {
            color: #6b7280;
            margin-bottom: 1rem;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            flex: 1;
        }
        
        /* 作者信息 */
        .author-info {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 1rem;
        }
        
        .author-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .author-name {
            font-weight: 500;
            color: #111827;
            font-size: 0.9rem;
        }
        
        .post-time {
            font-size: 0.8rem;
            color: #9ca3af;
        }
        
        /* 互动数据和操作 */
        .article-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .article-metrics {
            display: flex;
            align-items: center;
            gap: 1.25rem;
            color: #9ca3af;
            font-size: 0.85rem;
        }
        
        .metric-item {
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .article-actions {
            display: flex;
            gap: 0.75rem;
        }
        
        .action-btn {
            background: none;
            border: none;
            color: #9ca3af;
            font-size: 0.85rem;
            display: flex;
            align-items: center;
            gap: 5px;
            padding: 5px 10px;
            border-radius: 6px;
            transition: all 0.2s;
            cursor: pointer;
        }
        
        .action-btn:hover {
            background-color: #f3f4f6;
            color: #3b82f6;
        }
        
        .action-btn.liked {
            color: #ef4444;
        }
        
        .action-btn.saved {
            color: #f59e0b;
        }
        
        /* 无图文章样式 */
        .article-card.no-image {
            border-left: 4px solid #3b82f6;
        }
        
        .article-card.no-image .article-image-container {
            display: none;
        }
        
        /* 分页 */
        .pagination-container {
            margin-top: 2rem;
            display: flex;
            justify-content: center;
        }
        
        .pagination {
            display: flex;
            gap: 0.5rem;
        }
        
        .page-btn {
            width: 36px;
            height: 36px;
            border-radius: 8px;
            border: 1px solid #e5e7eb;
            background-color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #4b5563;
            transition: all 0.2s;
            cursor: pointer;
        }
        
        .page-btn:hover {
            border-color: #3b82f6;
            color: #3b82f6;
        }
        
        .page-btn.active {
            background-color: #3b82f6;
            color: white;
            border-color: #3b82f6;
        }
        
        .page-btn.disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        
        .page-btn.disabled:hover {
            border-color: #e5e7eb;
            color: #4b5563;
        }
        
        /* 响应式调整 */
        @media (max-width: 768px) {
            .article-card {
                flex-direction: column;
            }
            
            .article-image-container {
                flex: none;
                height: 180px;
            }
            
            .filter-section.row > div {
                margin-bottom: 1rem;
            }
            
            .article-footer {
                flex-direction: column;
                align-items: flex-start;
                gap: 0.75rem;
            }
            
            .page-title {
                font-size: 1.75rem;
            }
        }
        
        @media (max-width: 576px) {
            .article-metrics {
                flex-wrap: wrap;
                gap: 0.75rem;
            }
            
            .sort-options {
                flex-direction: column;
                gap: 0.5rem;
            }
            
            .sort-option {
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-light py-3">
        <div class="container">
            <a href="#" class="logo">
                <i class="fas fa-lightbulb"></i>
                <span>知享社交</span>
            </a>
            
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent">
                <i class="fas fa-bars"></i>
            </button>
            
            <div class="collapse navbar-collapse" id="navbarContent">
                <ul class="navbar-nav ms-auto gap-3">
                    <li class="nav-item">
                        <a href="#" class="nav-link">首页</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link active">文章</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">关注</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">消息</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="btn btn-primary rounded-pill">
                            <i class="fas fa-pen me-1"></i> 发布
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    
    <!-- 主内容区 -->
    <div class="container main-container">
        <h1 class="page-title">探索文章</h1>
        
        <!-- 筛选区域 -->
        <div class="filters-container">
            <!-- 搜索框 -->
            <div class="search-container">
                <i class="fas fa-search search-icon"></i>
                <input type="text" class="search-input" placeholder="搜索文章标题、内容或作者...">
            </div>
            
            <div class="filter-section row">
                <!-- 分类筛选 -->
                <div class="col-md-4">
                    <h3 class="filter-title">
                        <i class="fas fa-th-large"></i> 内容分类
                    </h3>
                    <div class="tag-filters">
                        <div class="tag-filter active">全部</div>
                        <div class="tag-filter">科技</div>
                        <div class="tag-filter">生活</div>
                        <div class="tag-filter">旅行</div>
                        <div class="tag-filter">美食</div>
                        <div class="tag-filter">阅读</div>
                        <div class="tag-filter">摄影</div>
                        <div class="tag-filter">更多</div>
                    </div>
                </div>
                
                <!-- 时间筛选 -->
                <div class="col-md-4">
                    <h3 class="filter-title">
                        <i class="fas fa-calendar-alt"></i> 发布时间
                    </h3>
                    <select class="select-filter">
                        <option value="all">全部时间</option>
                        <option value="today">今天</option>
                        <option value="week">本周</option>
                        <option value="month">本月</option>
                        <option value="quarter">近三个月</option>
                        <option value="year">今年</option>
                    </select>
                </div>
                
                <!-- 来源筛选 -->
                <div class="col-md-4">
                    <h3 class="filter-title">
                        <i class="fas fa-user-friends"></i> 内容来源
                    </h3>
                    <select class="select-filter">
                        <option value="all">全部内容</option>
                        <option value="following">关注的人</option>
                        <option value="recommended">推荐内容</option>
                        <option value="trending">热门内容</option>
                        <option value="official">官方精选</option>
                    </select>
                </div>
            </div>
            
            <div class="filter-section">
                <h3 class="filter-title">
                    <i class="fas fa-sort"></i> 排序方式
                </h3>
                <div class="sort-options">
                    <label class="sort-option active">
                        <input type="radio" name="sort" value="recommended" checked>
                        <i class="fas fa-star"></i>
                        <span>推荐排序</span>
                    </label>
                    <label class="sort-option">
                        <input type="radio" name="sort" value="latest">
                        <i class="fas fa-clock"></i>
                        <span>最新发布</span>
                    </label>
                    <label class="sort-option">
                        <input type="radio" name="sort" value="popular">
                        <i class="fas fa-fire"></i>
                        <span>热门程度</span>
                    </label>
                    <label class="sort-option">
                        <input type="radio" name="sort" value="commented">
                        <i class="fas fa-comment"></i>
                        <span>评论最多</span>
                    </label>
                    <label class="sort-option">
                        <input type="radio" name="sort" value="favorited">
                        <i class="fas fa-heart"></i>
                        <span>点赞最多</span>
                    </label>
                </div>
            </div>
        </div>
        
        <!-- 文章列表 -->
        <div class="articles-container">
            <!-- 文章1 -->
            <div class="article-card">
                <div class="article-image-container">
                    <img src="https://picsum.photos/600/400?random=1" alt="城市建筑摄影" class="article-image">
                </div>
                <div class="article-content">
                    <span class="category-tag cat-photo">摄影</span>
                    <h3 class="article-title">
                        <a href="#" class="text-decoration-none">城市建筑摄影：捕捉现代都市的线条与光影之美</a>
                    </h3>
                    
                    <div class="author-info">
                        <img src="https://picsum.photos/200/200?random=101" alt="张明的头像" class="author-avatar">
                        <div>
                            <span class="author-name">张明</span>
                            <span class="post-time">· 3天前</span>
                        </div>
                    </div>
                    
                    <p class="article-excerpt">
                        现代城市建筑是人类文明的结晶，每一栋建筑都蕴含着设计师的巧思与时代的印记。本文将分享如何通过摄影镜头捕捉建筑的线条美感、光影变化和空间韵律...
                    </p>
                    
                    <div class="article-footer">
                        <div class="article-metrics">
                            <div class="metric-item">
                                <i class="far fa-eye"></i>
                                <span>3.2k</span>
                            </div>
                            <div class="metric-item">
                                <i class="far fa-comment"></i>
                                <span>86</span>
                            </div>
                            <div class="metric-item">
                                <i class="far fa-bookmark"></i>
                                <span>245</span>
                            </div>
                        </div>
                        
                        <div class="article-actions">
                            <button class="action-btn">
                                <i class="far fa-heart"></i>
                                <span>428</span>
                            </button>
                            <button class="action-btn">
                                <i class="far fa-bookmark"></i>
                                <span>收藏</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 文章2 (无图) -->
            <div class="article-card no-image">
                <div class="article-image-container">
                    <img src="" alt="" class="article-image">
                </div>
                <div class="article-content">
                    <span class="category-tag cat-tech">科技</span>
                    <h3 class="article-title">
                        <a href="#" class="text-decoration-none">人工智能如何改变我们的创作方式：机遇与挑战</a>
                    </h3>
                    
                    <div class="author-info">
                        <img src="https://picsum.photos/200/200?random=102" alt="孙科的头像" class="author-avatar">
                        <div>
                            <span class="author-name">孙科</span>
                            <span class="post-time">· 5天前</span>
                        </div>
                    </div>
                    
                    <p class="article-excerpt">
                        随着AI生成内容技术的快速发展，创作者的工作方式正在发生深刻变化，这既带来了新的机遇，也带来了伦理和版权方面的挑战。本文将深入探讨这些变化...
                    </p>
                    
                    <div class="article-footer">
                        <div class="article-metrics">
                            <div class="metric-item">
                                <i class="far fa-eye"></i>
                                <span>3.5k</span>
                            </div>
                            <div class="metric-item">
                                <i class="far fa-comment"></i>
                                <span>128</span>
                            </div>
                            <div class="metric-item">
                                <i class="far fa-bookmark"></i>
                                <span>312</span>
                            </div>
                        </div>
                        
                        <div class="article-actions">
                            <button class="action-btn liked">
                                <i class="fas fa-heart"></i>
                                <span>432</span>
                            </button>
                            <button class="action-btn saved">
                                <i class="fas fa-bookmark"></i>
                                <span>已收藏</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 文章3 -->
            <div class="article-card">
                <div class="article-image-container">
                    <img src="https://picsum.photos/600/400?random=2" alt="手冲咖啡" class="article-image">
                </div>
                <div class="article-content">
                    <span class="category-tag cat-food">美食</span>
                    <h3 class="article-title">
                        <a href="#" class="text-decoration-none">手冲咖啡入门指南：从选豆到萃取的完美掌握</a>
                    </h3>
                    
                    <div class="author-info">
                        <img src="https://picsum.photos/200/200?random=103" alt="李婷的头像" class="author-avatar">
                        <div>
                            <span class="author-name">李婷</span>
                            <span class="post-time">· 1周前</span>
                        </div>
                    </div>
                    
                    <p class="article-excerpt">
                        手冲咖啡不仅是一种饮品制作方式，更是一门需要耐心和技巧的艺术。本文将详细介绍手冲咖啡的基本原理、所需器具、咖啡豆选择标准，以及水温控制...
                    </p>
                    
                    <div class="article-footer">
                        <div class="article-metrics">
                            <div class="metric-item">
                                <i class="far fa-eye"></i>
                                <span>5.7k</span>
                            </div>
                            <div class="metric-item">
                                <i class="far fa-comment"></i>
                                <span>132</span>
                            </div>
                            <div class="metric-item">
                                <i class="far fa-bookmark"></i>
                                <span>421</span>
                            </div>
                        </div>
                        
                        <div class="article-actions">
                            <button class="action-btn liked">
                                <i class="fas fa-heart"></i>
                                <span>756</span>
                            </button>
                            <button class="action-btn">
                                <i class="far fa-bookmark"></i>
                                <span>收藏</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 文章4 -->
            <div class="article-card">
                <div class="article-image-container">
                    <img src="https://picsum.photos/600/400?random=3" alt="远程工作" class="article-image">
                </div>
                <div class="article-content">
                    <span class="category-tag cat-tech">职场</span>
                    <h3 class="article-title">
                        <a href="#" class="text-decoration-none">远程工作效率提升指南：如何在家中保持专注与创造力</a>
                    </h3>
                    
                    <div class="author-info">
                        <img src="https://picsum.photos/200/200?random=104" alt="王强的头像" class="author-avatar">
                        <div>
                            <span class="author-name">王强</span>
                            <span class="post-time">· 2周前</span>
                        </div>
                    </div>
                    
                    <p class="article-excerpt">
                        随着数字化转型的加速，远程工作已成为许多人的常态。然而，在家办公也面临着诸多挑战：如何建立工作边界、保持高效专注、避免拖延和倦怠？...
                    </p>
                    
                    <div class="article-footer">
                        <div class="article-metrics">
                            <div class="metric-item">
                                <i class="far fa-eye"></i>
                                <span>8.9k</span>
                            </div>
                            <div class="metric-item">
                                <i class="far fa-comment"></i>
                                <span>215</span>
                            </div>
                            <div class="metric-item">
                                <i class="far fa-bookmark"></i>
                                <span>643</span>
                            </div>
                        </div>
                        
                        <div class="article-actions">
                            <button class="action-btn">
                                <i class="far fa-heart"></i>
                                <span>1243</span>
                            </button>
                            <button class="action-btn saved">
                                <i class="fas fa-bookmark"></i>
                                <span>已收藏</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 文章5 (无图) -->
            <div class="article-card no-image">
                <div class="article-image-container">
                    <img src="" alt="" class="article-image">
                </div>
                <div class="article-content">
                    <span class="category-tag cat-reading">思想</span>
                    <h3 class="article-title">
                        <a href="#" class="text-decoration-none">数字时代的注意力危机：我们如何重新掌控自己的专注能力</a>
                    </h3>
                    
                    <div class="author-info">
                        <img src="https://picsum.photos/200/200?random=105" alt="陈静的头像" class="author-avatar">
                        <div>
                            <span class="author-name">陈静</span>
                            <span class="post-time">· 3周前</span>
                        </div>
                    </div>
                    
                    <p class="article-excerpt">
                        在信息爆炸的数字时代，我们的注意力正被源源不断的通知、推送和短视频切割成碎片。这种碎片化的注意力不仅影响我们的工作效率，还可能改变我们的思维方式...
                    </p>
                    
                    <div class="article-footer">
                        <div class="article-metrics">
                            <div class="metric-item">
                                <i class="far fa-eye"></i>
                                <span>4.1k</span>
                            </div>
                            <div class="metric-item">
                                <i class="far fa-comment"></i>
                                <span>156</span>
                            </div>
                            <div class="metric-item">
                                <i class="far fa-bookmark"></i>
                                <span>328</span>
                            </div>
                        </div>
                        
                        <div class="article-actions">
                            <button class="action-btn liked">
                                <i class="fas fa-heart"></i>
                                <span>642</span>
                            </button>
                            <button class="action-btn">
                                <i class="far fa-bookmark"></i>
                                <span>收藏</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 分页 -->
        <div class="pagination-container">
            <div class="pagination">
                <button class="page-btn disabled">
                    <i class="fas fa-chevron-left"></i>
                </button>
                <button class="page-btn active">1</button>
                <button class="page-btn">2</button>
                <button class="page-btn">3</button>
                <button class="page-btn">4</button>
                <button class="page-btn">5</button>
                <button class="page-btn">
                    <i class="fas fa-chevron-right"></i>
                </button>
            </div>
        </div>
    </div>
    
    <!-- 页脚 -->
    <footer class="bg-white border-top py-5 mt-5">
        <div class="container">
            <div class="text-center text-muted">
                <div class="mb-3">
                    <a href="#" class="text-muted me-4"><i class="fab fa-weibo fa-lg"></i></a>
                    <a href="#" class="text-muted me-4"><i class="fab fa-wechat fa-lg"></i></a>
                    <a href="#" class="text-muted"><i class="fab fa-instagram fa-lg"></i></a>
                </div>
                <p>&copy; 2023 知享社交 - 分享知识，连接思想</p>
                <p class="small mt-2">隐私政策 | 使用条款 | 关于我们</p>
            </div>
        </div>
    </footer>

    <!-- Bootstrap 5 JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // 筛选标签切换
        document.querySelectorAll('.tag-filter').forEach(tag => {
            tag.addEventListener('click', function() {
                // 移除所有标签的active类
                document.querySelectorAll('.tag-filter').forEach(t => {
                    t.classList.remove('active');
                });
                // 给当前点击的标签添加active类
                this.classList.add('active');
                
                // 这里可以添加筛选逻辑
                filterArticles();
            });
        });
        
        // 排序选项切换
        document.querySelectorAll('.sort-option').forEach(option => {
            option.addEventListener('click', function() {
                // 移除所有选项的active类
                document.querySelectorAll('.sort-option').forEach(o => {
                    o.classList.remove('active');
                });
                // 给当前点击的选项添加active类
                this.classList.add('active');
                // 选中对应的radio
                this.querySelector('input').checked = true;
                
                // 这里可以添加排序逻辑
                sortArticles();
            });
        });
        
        // 下拉筛选变化
        document.querySelectorAll('.select-filter').forEach(select => {
            select.addEventListener('change', function() {
                // 这里可以添加筛选逻辑
                filterArticles();
            });
        });
        
        // 搜索功能
        document.querySelector('.search-input').addEventListener('input', function() {
            // 这里可以添加搜索逻辑
            searchArticles(this.value);
        });
        
        // 点赞功能
        document.querySelectorAll('.action-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                const icon = this.querySelector('i');
                
                // 点赞按钮逻辑
                if (icon.classList.contains('fa-heart')) {
                    if (icon.classList.contains('far')) {
                        icon.classList.remove('far');
                        icon.classList.add('fas');
                        this.classList.add('liked');
                        
                        // 更新点赞数
                        const countSpan = this.querySelector('span');
                        countSpan.textContent = parseInt(countSpan.textContent) + 1;
                    } else {
                        icon.classList.remove('fas');
                        icon.classList.add('far');
                        this.classList.remove('liked');
                        
                        // 更新点赞数
                        const countSpan = this.querySelector('span');
                        countSpan.textContent = parseInt(countSpan.textContent) - 1;
                    }
                }
                
                // 收藏按钮逻辑
                if (icon.classList.contains('fa-bookmark')) {
                    if (icon.classList.contains('far')) {
                        icon.classList.remove('far');
                        icon.classList.add('fas');
                        this.classList.add('saved');
                        this.querySelector('span').textContent = '已收藏';
                    } else {
                        icon.classList.remove('fas');
                        icon.classList.add('far');
                        this.classList.remove('saved');
                        this.querySelector('span').textContent = '收藏';
                    }
                }
            });
        });
        
        // 分页功能
        document.querySelectorAll('.page-btn:not(.disabled)').forEach(btn => {
            if (!btn.querySelector('i')) { // 不是箭头按钮
                btn.addEventListener('click', function() {
                    // 移除所有页码的active类
                    document.querySelectorAll('.page-btn').forEach(p => {
                        p.classList.remove('active');
                    });
                    // 给当前点击的页码添加active类
                    this.classList.add('active');
                    
                    // 这里可以添加分页逻辑
                    loadPage(parseInt(this.textContent));
                });
            }
        });
        
        // 筛选文章的函数（示例）
        function filterArticles() {
            // 获取当前选中的筛选条件
            const category = document.querySelector('.tag-filter.active').textContent;
            const timeRange = document.querySelector('.select-filter').value;
            
            // 模拟筛选加载
            console.log(`筛选条件: 分类=${category}, 时间范围=${timeRange}`);
            
            // 实际应用中这里会根据筛选条件更新文章列表
        }
        
        // 排序文章的函数（示例）
        function sortArticles() {
            const sortBy = document.querySelector('input[name="sort"]:checked').value;
            console.log(`排序方式: ${sortBy}`);
            
            // 实际应用中这里会根据排序条件重新排序文章列表
        }
        
        // 搜索文章的函数（示例）
        function searchArticles(keyword) {
            console.log(`搜索关键词: ${keyword}`);
            
            // 实际应用中这里会根据关键词筛选文章
        }
        
        // 加载指定页码的函数（示例）
        function loadPage(pageNum) {
            console.log(`加载第 ${pageNum} 页`);
            
            // 实际应用中这里会加载指定页的文章
        }
    </script>
</body>
</html>
    
